<template>
  <div class="help-center-page">
    <!-- 顶部蓝色渐变区域 -->
    <div class="header">
      <router-link to="/profile" class="header-back">
        <i class="fas fa-arrow-left"></i>
      </router-link>
      <div class="header-title">帮助中心</div>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <div class="search-box">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索常见问题" v-model="searchQuery" @input="handleSearch">
      </div>
    </div>

    <!-- 常见问题分类 -->
    <div class="category-section">
      <div class="category-item" v-for="(category, index) in categories" :key="index" @click="selectCategory(category)">
        <div class="category-icon">
          <i :class="category.icon"></i>
        </div>
        <div class="category-name">{{ category.name }}</div>
      </div>
    </div>

    <!-- 热门问题 -->
    <div class="section-title">热门问题</div>
    <div class="faq-list">
      <div class="faq-item" v-for="(faq, index) in filteredFaqs" :key="index" @click="toggleFaq(index)">
        <div class="faq-question">
          <span>{{ faq.question }}</span>
          <i class="fas" :class="expandedFaqs.includes(index) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
        </div>
        <div class="faq-answer" v-if="expandedFaqs.includes(index)">
          {{ faq.answer }}
        </div>
      </div>
    </div>

    <!-- 联系我们 -->
    <div class="section-title">联系我们</div>
    <div class="contact-section">
      <div class="contact-item" @click="callCustomerService">
        <div class="contact-icon">
          <i class="fas fa-phone-alt"></i>
        </div>
        <div class="contact-info">
          <div class="contact-name">客服热线</div>
          <div class="contact-value">400-123-4567</div>
        </div>
      </div>
      <div class="contact-item" @click="openEmail">
        <div class="contact-icon">
          <i class="fas fa-envelope"></i>
        </div>
        <div class="contact-info">
          <div class="contact-name">电子邮箱</div>
          <div class="contact-value">support@petshop.com</div>
        </div>
      </div>
    </div>

    <!-- 工作时间 -->
    <div class="working-hours">
      <div class="hours-title">
        <i class="fas fa-clock"></i>
        <span>客服工作时间</span>
      </div>
      <div class="hours-content">周一至周日 9:00-18:00</div>
    </div>

    <!-- 底部导航 -->
    <TabBar active-tab="profile" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { showToast } from 'vant';

interface Category {
  name: string;
  icon: string;
  id: string;
}

interface FAQ {
  question: string;
  answer: string;
  categories: string[];
}

export default defineComponent({
  name: 'HelpCenterView',
  components: {
    TabBar
  },
  setup() {
    const searchQuery = ref('');
    const expandedFaqs = ref<number[]>([]);
    const selectedCategory = ref<string | null>(null);

    // 问题分类
    const categories = ref<Category[]>([
      { name: '账户问题', icon: 'fas fa-user', id: 'account' },
      { name: '订单相关', icon: 'fas fa-shopping-bag', id: 'order' },
      { name: '配送问题', icon: 'fas fa-truck', id: 'shipping' },
      { name: '退款退货', icon: 'fas fa-exchange-alt', id: 'refund' },
      { name: '商品咨询', icon: 'fas fa-paw', id: 'product' }
    ]);

    // FAQ数据
    const faqs = ref<FAQ[]>([
      {
        question: '如何注册新账户？',
        answer: '打开应用首页，点击右下角"我的"，然后点击"登录/注册"按钮。您可以使用手机号码进行注册，填写验证码并设置密码即可完成注册。',
        categories: ['account']
      },
      {
        question: '忘记密码怎么办？',
        answer: '在登录页面点击"忘记密码"，输入您的手机号码，获取验证码后可以重新设置密码。如果仍有问题，请联系客服。',
        categories: ['account']
      },
      {
        question: '如何查看我的订单？',
        answer: '登录后，进入"我的"页面，点击"我的订单"或顶部的"订单"选项卡，可以查看所有订单信息。',
        categories: ['order']
      },
      {
        question: '支持哪些支付方式？',
        answer: '我们支持微信支付、支付宝、银联卡支付以及货到付款（部分地区）。',
        categories: ['order']
      },
      {
        question: '配送范围和时间是怎样的？',
        answer: '我们覆盖全国大部分城市，一般情况下，一线城市24小时内发货，预计2-3天送达；其他城市预计3-5天送达。偏远地区可能需要更长时间。',
        categories: ['shipping']
      },
      {
        question: '如何申请退款？',
        answer: '进入"我的订单"，选择需要退款的订单，点击"申请退款"按钮，填写退款原因并提交。客服会在24小时内处理您的申请。',
        categories: ['refund']
      },
      {
        question: '退货的流程是怎样的？',
        answer: '首先申请退款并注明需要退货，审核通过后，您将收到退货地址。包装好商品后，按照提供的地址寄回，并填写您收到的快递单号，我们确认收到退货后会安排退款。',
        categories: ['refund']
      },
      {
        question: '如何查看商品是否适合我的宠物？',
        answer: '每个商品详情页都有适用宠物种类、年龄和体重等信息，请仔细阅读。如有疑问，可以联系在线客服咨询。',
        categories: ['product']
      },
      {
        question: '商品有保质期吗？',
        answer: '所有食品类商品均标明保质期，我们承诺发货时商品保质期不少于原保质期的70%。如收到临期商品，可联系客服处理。',
        categories: ['product']
      },
      {
        question: '如何成为会员并获得优惠？',
        answer: '注册账户后自动成为普通会员。累计消费满一定金额可升级为黄金会员，享受更多优惠。具体可在"会员中心"查看详情。',
        categories: ['account']
      }
    ]);

    // 根据搜索和分类筛选FAQ
    const filteredFaqs = computed(() => {
      let result = faqs.value;
      
      // 如果选择了分类
      if (selectedCategory.value) {
        result = result.filter(faq => faq.categories.includes(selectedCategory.value as string));
      }
      
      // 如果有搜索关键词
      if (searchQuery.value.trim()) {
        const query = searchQuery.value.toLowerCase();
        result = result.filter(faq => 
          faq.question.toLowerCase().includes(query) || 
          faq.answer.toLowerCase().includes(query)
        );
      }
      
      return result;
    });

    // 展开/收起FAQ
    const toggleFaq = (index: number) => {
      const position = expandedFaqs.value.indexOf(index);
      if (position === -1) {
        expandedFaqs.value.push(index);
      } else {
        expandedFaqs.value.splice(position, 1);
      }
    };

    // 选择分类
    const selectCategory = (category: Category) => {
      if (selectedCategory.value === category.id) {
        selectedCategory.value = null; // 再次点击同一分类则取消筛选
      } else {
        selectedCategory.value = category.id;
      }
      // 重置展开状态
      expandedFaqs.value = [];
    };

    // 搜索处理
    const handleSearch = () => {
      // 重置展开状态
      expandedFaqs.value = [];
      // 如果搜索有结果且结果少于3个，自动展开所有结果
      if (filteredFaqs.value.length > 0 && filteredFaqs.value.length <= 3) {
        for (let i = 0; i < filteredFaqs.value.length; i++) {
          expandedFaqs.value.push(i);
        }
      }
    };

    // 拨打客服电话
    const callCustomerService = () => {
      // 在移动端会调起拨号界面
      window.location.href = 'tel:400-123-4567';
    };

    // 打开邮件客户端
    const openEmail = () => {
      window.location.href = 'mailto:support@petshop.com';
    };

    return {
      searchQuery,
      categories,
      expandedFaqs,
      filteredFaqs,
      toggleFaq,
      selectCategory,
      handleSearch,
      callCustomerService,
      openEmail
    };
  }
});
</script>

<style scoped>
.help-center-page {
  padding-bottom: 60px;
  /* 为底部导航栏留出空间 */
  background-color: #f7fafc;
  min-height: 100vh;
}

.header {
  background: linear-gradient(to right, #3490dc, #6574cd);
  color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-back {
  color: white;
  font-size: 18px;
  margin-right: 15px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  text-align: center;
  margin-right: 15px; /* 为了平衡左侧的返回按钮 */
}

.search-container {
  padding: 15px;
  background-color: white;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #edf2f7;
  border-radius: 20px;
  padding: 8px 15px;
}

.search-box i {
  color: #718096;
  margin-right: 10px;
}

.search-box input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: #4a5568;
  outline: none;
}

.category-section {
  display: flex;
  padding: 15px 0;
  margin: 0 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.category-section::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  min-width: 60px;
}

.category-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  color: #3490dc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.category-icon i {
  font-size: 22px;
}

.category-name {
  font-size: 12px;
  color: #4a5568;
}

.section-title {
  padding: 15px;
  font-weight: 500;
  color: #4a5568;
  font-size: 16px;
}

.faq-list {
  background-color: white;
  border-radius: 10px;
  margin: 0 15px 15px;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid #e2e8f0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  align-items: center;
}

.faq-question span {
  font-size: 14px;
  color: #4a5568;
  flex: 1;
}

.faq-question i {
  color: #a0aec0;
  font-size: 12px;
}

.faq-answer {
  padding: 0 15px 15px;
  font-size: 14px;
  color: #718096;
  line-height: 1.5;
  background-color: #f8fafc;
  margin: 0 15px 15px;
  border-radius: 5px;
}

.contact-section {
  background-color: white;
  border-radius: 10px;
  margin: 0 15px 15px;
  overflow: hidden;
}

.contact-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ebf8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #3490dc;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 5px;
}

.contact-value {
  font-size: 14px;
  color: #718096;
}

.working-hours {
  background-color: white;
  border-radius: 10px;
  margin: 0 15px 15px;
  padding: 15px;
}

.hours-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #4a5568;
}

.hours-title i {
  margin-right: 10px;
  color: #3490dc;
}

.hours-content {
  color: #718096;
  font-size: 14px;
  padding-left: 25px;
}
</style> 